<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贷你盈新年定制贺卡</title>
<link rel="stylesheet" href="../../www/Public/Special/Css/Monkey/monkey.css" />
<link rel="stylesheet" type="text/css" href="../../www/Public/Special/Css/Monkey/component.css" />
<script type="text/javascript" src="../../www/Public/Special/Js/Monkey/jquery-2.1.1.min.js"></script>
<!--<script type="text/javascript" src="../../www/Public/Special/Js/Monkey/component.js"></script>-->
<script type="text/javascript" src="../../www/Public/Js/ajaxfileupload.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        wx.config({

            debug: false,//这里是开启测试，如果设置为true，则打开每个步骤，都会有提示，是否成功或者失败
            appId: 'wx56b3166a3ae04149', // 必填，公众号的唯一标识
            timestamp: "{$weixin['time']}", // 必填，生成签名的时间戳
            nonceStr: "{$weixin['noncestr']}", // 必填，生成签名的随机串
            signature: "{$weixin['signature']}",// 必填，签名，见附录1
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ]
        });
        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: "有人@你，新春到福气到！", // 分享标题
                link: "https://www.dadijinrong.com/Special/imgsc1", // 分享链接
                imgUrl: "https://www.dadijinrong.com/Public/Special/Img/Monkey/monky.png", // 分享图标
                success: function () {
                    // 用户确认分享后执行的回调函数
                    //window.location.href="http://{$url}/lashou/invitefriends_success/code/{$m_id}/cct_id/{$cct_id}";
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    alert('取消分享')
                }
            });
            wx.onMenuShareAppMessage({
                title: "有人@你，新春到福气到！", // 分享标题
                desc: "好友为您制作的福气贺卡来啦！打开福气卡，财源滚滚来", // 分享描述
                link: "https://www.dadijinrong.com/Special/imgsc1", // 分享链接
                imgUrl: "https://www.dadijinrong.com/Public/Special/Img/Monkey/monky.png", // 分享图标
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    //window.location.href="http://{$url}/lashou/invitefriends_success";
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

        });
    </script>
    <script>
        /*if(window.location.protocol == 'file:'){
         alert('To test this demo properly please use a local server such as XAMPP or WAMP. See README.md for more details.');
         }*/
        var resizeableImage = function(image_target) {
            // Some variable and settings
            var $container,
                    orig_src = new Image(),
                    image_target = $(image_target).get(0),
                    event_state = {},
                    constrain = false,
                    min_width = 60, // Change as required
                    min_height = 60,
                    max_width = 800, // Change as required
                    max_height = 900,
                    resize_canvas = document.createElement('canvas');

            init = function(){

                // When resizing, we will always use this copy of the original as the base
                orig_src.src=image_target.src;

                // Wrap the image with the container and add resize handles
                $(image_target).wrap('<div class="resize-container"></div>')
                        .before('<span class="resize-handle resize-handle-nw"></span>')
                        .before('<span class="resize-handle resize-handle-ne"></span>')
                        .after('<span class="resize-handle resize-handle-se"></span>')
                        .after('<span class="resize-handle resize-handle-sw"></span>');

                // Assign the container to a variable
                $container =  $(image_target).parent('.resize-container');

                // Add events
                $container.on('mousedown touchstart', '.resize-handle', startResize);
                $container.on('mousedown touchstart', 'img', startMoving);
                $('.js-crop').on('click', crop);
            };

            startResize = function(e){
                e.preventDefault();
                e.stopPropagation();
                saveEventState(e);
                $(document).on('mousemove touchmove', resizing);
                $(document).on('mouseup touchend', endResize);
            };

            endResize = function(e){
                e.preventDefault();
                $(document).off('mouseup touchend', endResize);
                $(document).off('mousemove touchmove', resizing);
            };

            saveEventState = function(e){
                // Save the initial event details and container state
                event_state.container_width = $container.width();
                event_state.container_height = $container.height();
                event_state.container_left = $container.offset().left;
                event_state.container_top = $container.offset().top;
                event_state.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
                event_state.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

                // This is a fix for mobile safari
                // For some reason it does not allow a direct copy of the touches property
                if(typeof e.originalEvent.touches !== 'undefined'){
                    event_state.touches = [];
                    $.each(e.originalEvent.touches, function(i, ob){
                        event_state.touches[i] = {};
                        event_state.touches[i].clientX = 0+ob.clientX;
                        event_state.touches[i].clientY = 0+ob.clientY;
                    });
                }
                event_state.evnt = e;
            };

            resizing = function(e){
                var mouse={},width,height,left,top,offset=$container.offset();
                mouse.x = (e.clientX || e.pageX || e.originalEvent.touches[0].clientX) + $(window).scrollLeft();
                mouse.y = (e.clientY || e.pageY || e.originalEvent.touches[0].clientY) + $(window).scrollTop();

                // Position image differently depending on the corner dragged and constraints
                if( $(event_state.evnt.target).hasClass('resize-handle-se') ){
                    width = mouse.x - event_state.container_left;
                    height = mouse.y  - event_state.container_top;
                    left = event_state.container_left;
                    top = event_state.container_top;
                } else if($(event_state.evnt.target).hasClass('resize-handle-sw') ){
                    width = event_state.container_width - (mouse.x - event_state.container_left);
                    height = mouse.y  - event_state.container_top;
                    left = mouse.x;
                    top = event_state.container_top;
                } else if($(event_state.evnt.target).hasClass('resize-handle-nw') ){
                    width = event_state.container_width - (mouse.x - event_state.container_left);
                    height = event_state.container_height - (mouse.y - event_state.container_top);
                    left = mouse.x;
                    top = mouse.y;
                    if(constrain || e.shiftKey){
                        top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
                    }
                } else if($(event_state.evnt.target).hasClass('resize-handle-ne') ){
                    width = mouse.x - event_state.container_left;
                    height = event_state.container_height - (mouse.y - event_state.container_top);
                    left = event_state.container_left;
                    top = mouse.y;
                    if(constrain || e.shiftKey){
                        top = mouse.y - ((width / orig_src.width * orig_src.height) - height);
                    }
                }

                // Optionally maintain aspect ratio
                if(constrain || e.shiftKey){
                    height = width / orig_src.width * orig_src.height;
                }

                if(width > min_width && height > min_height && width < max_width && height < max_height){
                    // To improve performance you might limit how often resizeImage() is called
                    resizeImage(width, height);
                    // Without this Firefox will not re-calculate the the image dimensions until drag end
                    $container.offset({'left': left, 'top': top});
                }
            }

            resizeImage = function(width, height){
                resize_canvas.width = width;
                resize_canvas.height = height;
                resize_canvas.getContext('2d').drawImage(orig_src, 0, 0, width, height);
                $(image_target).attr('src', resize_canvas.toDataURL("image/png"));
            };

            startMoving = function(e){
                e.preventDefault();
                e.stopPropagation();
                saveEventState(e);
                $(document).on('mousemove touchmove', moving);
                $(document).on('mouseup touchend', endMoving);
            };

            endMoving = function(e){
                e.preventDefault();
                $(document).off('mouseup touchend', endMoving);
                $(document).off('mousemove touchmove', moving);
            };

            moving = function(e){
                var  mouse={}, touches;
                e.preventDefault();
                e.stopPropagation();

                touches = e.originalEvent.touches;

                mouse.x = (e.clientX || e.pageX || touches[0].clientX) + $(window).scrollLeft();
                mouse.y = (e.clientY || e.pageY || touches[0].clientY) + $(window).scrollTop();
                $container.offset({
                    'left': mouse.x - ( event_state.mouse_x - event_state.container_left ),
                    'top': mouse.y - ( event_state.mouse_y - event_state.container_top )
                });
                // Watch for pinch zoom gesture while moving
                if(event_state.touches && event_state.touches.length > 1 && touches.length > 1){
                    var width = event_state.container_width, height = event_state.container_height;
                    var a = event_state.touches[0].clientX - event_state.touches[1].clientX;
                    a = a * a;
                    var b = event_state.touches[0].clientY - event_state.touches[1].clientY;
                    b = b * b;
                    var dist1 = Math.sqrt( a + b );

                    a = e.originalEvent.touches[0].clientX - touches[1].clientX;
                    a = a * a;
                    b = e.originalEvent.touches[0].clientY - touches[1].clientY;
                    b = b * b;
                    var dist2 = Math.sqrt( a + b );

                    var ratio = dist2 /dist1;

                    width = width * ratio;
                    height = height * ratio;
                    // To improve performance you might limit how often resizeImage() is called
                    resizeImage(width, height);
                }
            };

            crop = function(){
                //Find the part of the image that is inside the crop box
                var crop_canvas,
                        left = $('.overlay').offset().left - $container.offset().left,
                        top =  $('.overlay').offset().top - $container.offset().top,
                        width = $('.overlay').width(),
                        height = $('.overlay').height();
                crop_canvas = document.createElement('canvas');
                crop_canvas.width = width;
                crop_canvas.height = height;
                crop_canvas.getContext('2d').drawImage(image_target, left, top, width, height, 0, 0, width, height);
                var image = crop_canvas.toDataURL("image/png");
                document.getElementById('scd1').src=image;
                //console.log(image);
                
                var timestamp = Date.parse(new Date());
                timestamp     = timestamp / 1000;
                var imgname   = timestamp+'.txt';
                $.ajax({
                    type:'post',
                    url:'{:U("Special/saveimginfo")}',
                    data:{shareimg:image,imgname:imgname},
                    success:function(data){
                        $('#myurl').text(data);                        
                    }
                });
                if($('.bj1').val()!=''){
                    newsharecontent=$('.bj1').val();
                }else{
                    newsharecontent='金猴献瑞财源广 大地年年硕果丰 ——贷你盈（点击填写祝福）';
                }
                var imgurltest = document.getElementById("imgOne").src;
        wx.config({
            debug: false,//这里是开启测试，如果设置为true，则打开每个步骤，都会有提示，是否成功或者失败
            appId: 'wx56b3166a3ae04149', // 必填，公众号的唯一标识
            timestamp: "{$weixin['time']}", // 必填，生成签名的时间戳
            nonceStr: "{$weixin['noncestr']}", // 必填，生成签名的随机串
            signature: "{$weixin['signature']}",// 必填，签名，见附录1
            jsApiList: [
                // 所有要调用的 API 都要加到这个列表中
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ]
        });

        wx.ready(function () {
            wx.onMenuShareTimeline({
                title: "有人@你，新春到福气到！"+imgurltest, // 分享标题
                link:"https://www.dadijinrong.com/Special/imgsc1/flag/nm/sharecontent/"+newsharecontent+'/shareimg/'+imgname, // 分享链接
                //imgUrl: "https://www.dadijinrong.com/Public/Special/Img/Monkey/monkey.png", // 分享图标
                imgUrl:imgurltest,
                success: function () {
                    // 用户确认分享后执行的回调函数
                    //window.location.href="http://{$url}/lashou/invitefriends_success/code/{$m_id}/cct_id/{$cct_id}";
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                    alert('取消分享')
                }
            });
            wx.onMenuShareAppMessage({
                title: "有人@你，新春到福气到！", // 分享标题
                desc: "好友为您制作的福气贺卡来啦！打开福气卡，财源滚滚来", // 分享描述
                link:   "https://www.dadijinrong.com/Special/imgsc1/flag/nm/sharecontent/"+newsharecontent+'/shareimg/'+imgname,// 分享链接
                //imgUrl: "https://www.dadijinrong.com/Public/Special/Img/Monkey/monkey.png", // 分享图标
                imgUrl:imgurltest,
                type: 'link', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                    //window.location.href="http://{$url}/lashou/invitefriends_success";
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

        });        
                
                
                
                
            }
            init();
        };

        // Kick everything off with the target image
        resizeableImage($('.resize-image'));
        function b(){
        $(".tcc1").hide("slow");
      }
    </script>

<script type="text/javascript">
    //下面用于图片上传预览功能
    function setImagePreviews(id) {
        var dd = document.getElementById("dd");  
        var imgw = window.screen.availWidth; //图片压缩宽度
        //ajax 上传文件
         $.ajaxFileUpload({
                    url: '/Special/uploadPic/', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议，一般设置为false
                    fileElementId: id, //文件上传域的ID
                    data:{imgw:imgw},
                    type:'post',
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function (data)  //服务器成功响应处理函数
                    {
                        if(data.status == '0'){                            
                            dd.innerHTML = "";
                            dd.innerHTML += "<img class='resize-image' id='imgOne'   alt='image for resizing'/><img style='float: left;visibility: hidden;' width='100%' src='../../www/Public/Special/Img/Monkey/01.png' alt='' />";
                            var imgObjPreview = document.getElementById("imgOne"); 
                            //火狐下，直接设img属性
                            imgObjPreview.style.display = 'block';
                            //                imgObjPreview.style.width = window.screen.availWidth;
                            imgObjPreview.style.width = '';
                            imgObjPreview.style.height ="";
                            //imgObjPreview.src = docObj.files[0].getAsDataURL();
                            //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                            imgObjPreview.src = data.imgurl;            
					        $("#scd").hide();					        
					        $("#scd").attr("src","")
					        $(".tj").hide();     
					        $(".tcc1").show();
					        setTimeout(b,4000);
                            resizeableImage($('.resize-image'));
                            return false;
                        }
                    }


         });        
    }
</script>
</head>
<body>
<div class="tcc1">满满的祝福才能显示诚意<br/>快去将照片在方框内填充满吧！</div>	
<div class="tcc">
	<img class="tc" width="100%" src="../../www/Public/Special/Img/Monkey/10.png"/>
</div>
<div style="margin :0px auto;">
	<div class="tj">
		<input type="file"  name="file" id="doc" multiple="multiple"  style="width:100%;height: 100%;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onchange="javascript:setImagePreviews(id);" accept="image/*" />
	</div>
	
	<div class="bk1">
		<div class="overlay" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;">
			<div class="overlay-inner"></div>	
		</div>
		<div id="dd">
                    <img style="float: left;visibility: hidden;" id='docFin' width="100%" src="" alt="" />
                    <img style="float: left;visibility: hidden;" width="100%" src="../../www/Public/Special/Img/Monkey/01.png" alt="" />
		</div>
        <img id="scd1" style="display: block" src="" alt="">
        <!--<canvas id="scd" width="100%" height="100%"></canvas>-->
	</div>
	<img class="imgL" width="31.3%" src="../../www/Public/Special/Img/Monkey/04.png" alt="" />
	<img class="imgR" width="30.6%" src="../../www/Public/Special/Img/Monkey/05.png" alt="" />
	<img class="imgC" width="100%" src="../../www/Public/Special/Img/Monkey/06.png" alt="" />
	<div class="bj">
		<textarea class="bj1" wrap="physical" placeholder="金猴献瑞财源广 大地年年硕果丰 ——贷你盈（点击填写祝福）" ></textarea>
		<img style="float: left;" width="100%" src="../../www/Public/Special/Img/Monkey/07.png" alt="" />
	</div>
	<!--生成贺卡-->
	<a><img class="sc js-crop" width="60%" src="../../www/Public/Special/Img/Monkey/08.png" alt="" /></a>
	<!--重选照片-->
	<div class="tj1">
		<input type="file"  name="file" id="doc1" multiple="multiple"  style="width:100%;height: 100%;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;" onchange="javascript:setImagePreviews(id);" accept="image/*" />
	</div>
	<!--制作我的贺卡-->
    <div id="myurl" style="display: none"></div>
	<a><img class="zzhk" style="display: none;" width="70%" src="../../www/Public/Special/Img/Monkey/s06.png" alt="" /></a>
</div>
</body>
</html>
<script type="text/javascript">

	$(function(){

            $(".js-crop").click(function(){
                    $("#scd").show();
                    $("#dd").css("opacity","0");
                    $('.sc').hide();
                    $('.tj1').hide();
                    $('.zzhk').show();
                    $(".bj1").attr("readonly","readonly");
//                $(".js-crop").onclick(alert($('#myurl').text()))
            });

//            $(":button").click(function () {
//                ajaxFileUpload();
//            })

        //alert(link);
	})

</script>

<script type="text/javascript">
    $('.zzhk').click(function(){

        $(".tcc").show();
    });


</script>
